<template>
	<view>
		<view class="w-1" style="position: sticky; left: 0; top: 0; z-index: 999;">
			<view style="background: #fff; height: 170rpx;">
				<view class="w-1 p-r-30 fr-b-c" style="height: 44px;"></view>
				<view class="search-box fr-b-c" style="padding-left: 36rpx; padding-right: 6rpx;">
					<image src="/static/images/user/search_icon.png" style="width: 34rpx; height: 34rpx;"></image>
					<input type="text"  placeholder-style="color: #CCCCCC;"  v-model="search_keys" confirm-type="search"
						 class="flex-1 s-input" placeholder="输入想找的商品~" />
					<u-icon name="close-circle-fill" class="close-circle-fill" color="#cdcdcd" @tap="close_input" v-show="search_keys"></u-icon>
					<view class="fr-c search-btn" @tap="search">搜索</view>
				</view>
			</view>
		</view>
		<view  style="position: fixed; left: 0;right:0; top: 170rpx; z-index: 999;">
			<view style="height: 120rpx; background: #fff;" class="fr-s-c w-1">
				<u-tabs style="width: 670rpx;" :list="top_cate" bg-color="#fff"  :current="current" @change="changeTab"
					bar-width="24" bar-height="8" gutter="52"  font-size="28" inactive-color="#666666"
					active-color="#FA360A"></u-tabs>
				<view class="fr-s-c down-view" @click="show=!show">
					<u-icon :name="show?'arrow-down':'arrow-up'" class="down-icon"></u-icon>
				</view>
			</view>
		</view>
		<view class="list w-1 p-r-30 fr-b-s">
			<view class="list-item fl-s-s" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<image :src="item.image" mode="aspectFill" class="list-item-img" ></image>
				<view class="fr-s-c w-1 relative" style="height: 32rpx; padding-left: 20rpx; margin-top: -18rpx;">
					<view class="fr-c label" v-if="item.is_new==1">新品</view>
					<view class="fr-c label" v-if="item.type_i==1">推荐</view>
				</view>
				<text class="m-t-10 w-1 text-line-2 c-00 fs-30 fm-ali" style="height: 84rpx;padding: 0 12rpx;">{{item.title}}</text>
				<view class="list-item-flex">
					<view class="fr-s-c fm-ali" style="color: #FA360A; align-items: baseline;">
						<text class="fs-24">￥</text>
						<text class="fs-36">{{item.price | pointsPrice}}</text>
						<text class="fs-20">.{{item.price | pointsPrice(1)}}</text>
					</view>
				</view>
				<view class="shangjia-bottom animated11 rubberBand11" >
					此商品可原价回购
				</view>
			</view>
			<u-empty mode="data" class="empty" v-if="list.length <= 0"></u-empty>
		</view>
			<view class="tc-view-yinying" @tap="show = false" v-show="show"></view>
			<view class="fr-s-s relative tc-view" v-show="show">
				<text class="c-66 fs-28 fm-ali m-r-30 m-b-30" @click="changeTab(index)" v-for="(item,index) in top_cate"
					:key="index">{{item.name}}</text>
			</view>

	</view>
</template>

<script>
	import {pointsPrice} from '@/utils/util.js'
	import config from '../../utils/base.js';
	export default {
		data() {
			return {
				// list1: [],
				top_cate:[],  // 顶部tab
				current: 0,
				show: false,
				page:1,
				list:[],   // 商品列表
				search_keys:'' ,//搜索关键字
				type:1,
				baseUrl:config,
				timert:'',
			}
		},
		onLoad() {
			this.getClassify()
		},
		onReachBottom() {
			if(this.list.length<this.count){
				this.page++
				this.getList(this.top_cate[this.current].id)
			}
		},
		onShow() {
			 let BuyBack_type = uni.getStorageSync('BuyBack_type')
			 // console.log(BuyBack_type)
			 if(BuyBack_type){
				 this.type = BuyBack_type
			 }else{
				 this.type = 1
			 }
		},
		onReady() {
			// this.current = uni.getStorageSync('c_current') ? Number(uni.getStorageSync('c_current')) : 0
			// console.log(this.current)
		},
		watch:{
			current(newval,oldval){
				if(this.top_cate.length){
					uni.setStorageSync('c_current', newval)
					this.page=1
					this.list = []
					this.tap_id = this.top_cate[newval].id
					this.getList()
				}
			},
			search_keys(newval,oldval){
				clearTimeout(this.timert)
				this.timert = setTimeout(()=>{
					this.getList()
				},1000)
			}
		},
		filters:{
			pointsPrice
		},
		methods: {
			// 获取分类列表
			getClassify(){
				this.$get({
					url:'/wanlshop/home/getCategory',
				}).then(res=>{
					console.log(res,'rrrrrrrr')
					this.top_cate = res.data
					this.tap_id = this.top_cate[0].id
					this.getList()
				})
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/Home/SearchPage/SearchPage'
				})
			},
			search(){
				this.getList()
			},
			// 获取商品列表
			getList(cate_id){
				let data={
					category_id:this.tap_id
				}
				this.$get({
					url:'/wanlshop/product/lists',
					data:{
						search:this.search_keys,
						sort:'weigh',
						order:'asc',
						filter: JSON.stringify(data),
						op:{"category_id":"in"},
						type:'goods',
						page:this.page
					}
				}).then(res=>{
					this.list = this.page==1?res.data.data:[...this.list,...res.data.data]
					this.nodata = !this.list.length
					this.count = res.data.total
				}).catch(err=>{
					this.list = []
					this.nodata = !this.list.length
					this.count = 0
				})
			},
			// // 商品详情
			toDetail(item){
				if(this.type == 1){
					uni.navigateTo({
						url:'/pages/Home/GoodsDetail/GoodsDetail?id='+item.id+'&platform='+item.platform+'&c_father_goods_id='+item.c_father_goods_id
					})
					// uni.navigateTo({
					// 	url:`/pages/Home/GoodsDetail/GoodsDetail?data=${JSON.stringify({ category_id: item.id, category_name: item.name })}`
					// })
				}else{
					uni.removeStorageSync('BuyBack_type')
					uni.navigateTo({
						url:'/pages/BuyBack/ReplacementOfOldItems/ReplacementOfOldItems?goodsinfo='+JSON.stringify(item)
					})
				}
				
			},
			searchInfo() {
				console.log(123)
			},
			changeTab(index) {
				console.log(index)
				this.show = false
				this.current = index
				// this.list = []
				// for(let i in this.top_cate[this.current].childlist){
				// 	// console.log(this.top_cate[0].childlist[i])
				// 	this.list = [...this.list,...this.top_cate[this.current].childlist[i].childlist]
				// }
				// console.log(this.list)
			},
			close_input(){
				this.search_keys = ''
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
		padding-bottom: 70rpx;
	}
	.tc-view-yinying{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: .7;
	}
	.tc-view{
		flex-wrap: wrap; 
		width: 100%; 
		padding: 28rpx 32rpx; 
		padding-bottom: 0; 
		background-color: #FFFFFF; 
		border-radius: 0 0 8rpx 8rpx;
		border-top: 2rpx solid #F4F4F4;
		position: fixed;
		top: 280rpx;
	}
	.shangjia-bottom{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E56D31;
		padding: 0 10rpx;
		/* margin-top: 10rpx; */
		
	}
	.list-item-flex{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
		/* margin-top: 10rpx; */
	}
	.list-item-flex-yuanjia{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
		text-decoration: line-through;
	}
	.close-circle-fill{
		margin-right: 12rpx;
	}
	
.text-line-2{
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	/*! autoprefixer: on */
	word-break: break-all ;
}
	>>>.u-popup__content {
		border-radius: 30rpx !important;
		overflow: hidden;
	}

	.common_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 280rpx;
	}

	.search-box {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 2rpx solid #FA360A;
		margin: auto;
	}

	.search-btn {
		width: 142rpx;
		height: 70rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		border-radius: 35rpx;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		position: relative;
		left: 6rpx;;
	}

	.s-input {
		font-size: 26rpx;
		font-family: Alibaba;
		color: #333333;
		margin-left: 6rpx;
		padding-left: 12rpx;
	}

	.list {
		padding-top: 120rpx;
		flex-wrap: wrap;
	}

	.list-item {
		width: 330rpx;
		height: 506rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #F4F4F4;
		margin-top: 20rpx;
	}
	.list-item-img{
		width:100%;
		height: 300rpx;
		border-radius: 12rpx 12rpx 0 0;
	}

	.label {
		height: 32rpx;
		background: linear-gradient(270deg, #EBC66D 0%, #EFDDB2 100%);
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		padding: 0 20rpx;
		margin-right: 8rpx;
	}
	.down-view{
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}
	.down-icon{
		position: absolute;
		left: 50%;
		transform:translateX(-50%);
	}
	
	
	@-webkit-keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}
	
	/* @keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	} */
	
	.rubberBand11 {
		-webkit-animation-name: rubberBand11;
		animation-name: rubberBand11;
	}
	
	.animated11 {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
	.empty{
		margin: 0 auto;
		margin-top: 300rpx !important;
	}
</style>
